<template>
	<div class="footer" @click="_curbar($event)">
		<router-link to="/home">
			<div class="item-wrap" data-index='0'>
				<film-svg></film-svg>
				<p>电影</p>
			</div>
		</router-link>
		<router-link to="/cinema">
			<div class="item-wrap" data-index='1'>
				<cinema-svg></cinema-svg>
				<p>影院</p>
			</div>
		</router-link>
		<router-link to="/me">
			<div class="item-wrap" data-index='2'>
				<me-svg></me-svg>
				<p>我的</p>
			</div>
		</router-link>
	</div>
</template>

<script>
import filmSvg from 'svg/film.svg';
import cinemaSvg from 'svg/cinema.svg';
import meSvg from 'svg/me.svg';

export default {
	components:{
		filmSvg,
		cinemaSvg,
		meSvg
	},
	data(){
		return {
			nowIndex:0,
			titles:['猫眼电影','影院','猫眼电影']
		}
	},
	methods:{
		_curbar(event){
			var index = event.target.dataset.index;
			if(index){
				this.nowIndex = index;
				this.$store.commit('setHeadTitle',this.titles[this.nowIndex])
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	
.footer{
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 48px;
	border-top: 1px solid #d8d8d8;
	background: #fff;
	a{
		color: #696969;
	}
	a.router-link-active{
		color: #f03d37;
		g,path{
			fill: #f03d37;
		}
	}
}
.item-wrap{
	height: 48px;
	text-align: center;
	svg{
		width: 25px;
		height: 25px;
		margin-top: 3px;
	}
	p{
		font-size: 12px;
		margin-top: -2px;
	}
}	
.item-wrap::after{
	content: '';
	display: block;
	width: 25px;
	height: 48px;
	position: absolute;
	top: 0;
}
</style>
